<!--<template>-->
    <!--<div class="app-container">活动营销平台管理系统</div>-->
<!--</template>-->
<!--<script>-->
    <!--export default {-->
        <!--name: 'index'-->
    <!--}-->
<!--</script>-->
<!--<style>-->
    <!--.app-container {-->
        <!--margin-top: 10%;-->
        <!--text-align: center;-->
        <!--font-size: 30px;-->
        <!--color: #455cb1;-->
        <!--text-shadow: 1px 1px 2px #5b78b1;-->
    <!--}-->
<!--</style>-->
<template>
  <div class="app-container">
    <header class="title">
      <el-button class="r pan-btn green-btn sm-btn"
                 size="small"
                 icon="el-icon-refresh"
                 @click="refresh()"></el-button>
    </header>
    <div class="container">
      <el-form label-width="120px"
               :model="searchForm"
               class="search-form">
        <el-form-item v-for="(item, index) in labelList"
                      :label="item[0]"
                      :key='index'>
          <el-checkbox-group v-model="labelArr[index].array"
                             size="medium">
            <el-checkbox-button @change="labelChange"
                                v-for="(labelItem, labelIndex) in item[2]"
                                :label="labelItem.id"
                                :name="item[1]"
                                :key="labelIndex">{{ labelItem.label }}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="全部"
                     name="all">
          <div class="img-con">
            <ul>
              <li v-for="item in templateArr">
                <figure @click="renderTemplateFlag(item.id)"
                        style="margin:0">
                  <div ref='tag'
                       class="tags-view-item">
                    <img :src="'/activityConsole/staticResources/'+item.image"
                         alt="">
                  </div>
                  <figcaption>
                    <!--<a :href="item.url">{{ item.remarks }}</a>-->
                    <p>{{ item.name }}</p>
                  </figcaption>
                </figure>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="标签一"
                     name="one">标签一</el-tab-pane>
        <el-tab-pane label="标签二"
                     name="two">标签二</el-tab-pane>
        <el-tab-pane label="标签三"
                     name="three">标签三</el-tab-pane> -->
      </el-tabs>
    </div>
    <footer>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="10"
                     layout="prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </footer>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: 'index',
  data() {
    return {
      activeName: 'all',
      total: 0,
      labelArr: [
        {
          name: 'science',
          array: []
        },
        {
          name: 'from',
          array: []
        },
        {
          name: 'theme',
          array: []
        },
        {
          name: 'type',
          array: []
        }
      ],
      templateArr: [],
      searchForm: {
        scienceLabelIds: '',
        fromLabelIds: '',
        themeLabelIds: '',
        typeLabelIds: '',
        pageNum: 0,
        pageSize: 10
      },
      labelList: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.getLabel()
      this.getTemplate()
    })
  },
  methods: {
    handleClick(e) {
      console.log(e)
    },
    getLabel() {
      const _this = this
      request.get('/activityConsole/activity/template/show/activity-label', {
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then(res => {
        _this.labelList = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    getTemplate() {
      const _this = this
      const params = _this.searchForm
      request({
        url: '/activityConsole/activity/template/show/activity-template-list',
        method: 'get',
        params: params
      }).then(res => {
        _this.templateArr = res.data
        _this.total = parseInt(res.description)
        console.log(_this.templateArr)
        console.log(_this.total)
      }).catch(err => {
        console.log(err)
      })
    },
    refresh() {
      this.$router.go(0)
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = parseInt(val) - 1
      this.getTemplate()
      this.getLabel()
    },
    renderIds(arr) {
      this.searchForm.scienceLabelIds = arr[0].array.join(',')
      this.searchForm.fromLabelIds = arr[1].array.join(',')
      this.searchForm.themeLabelIds = arr[2].array.join(',')
      this.searchForm.typeLabelIds = arr[3].array.join(',')
    },
    labelChange() {
      this.renderIds(this.labelArr)
      this.getTemplate()
    },
    renderTemplateFlag(id) {
      const _this = this
      request({
        url: '/activityConsole/activity/template/info/id/' + id + '/type',
        method: 'get'
      }).then(res => {
        console.log(res)
        if (res === 'periodical') {
          _this.$router.push({ path: '/template-edit/PeriodicalEdit?type=' + res + '&templateId=' + id })
          return false
        }
        _this.$router.push({ path: '/template-edit/TemplateEdit?type=' + res + '&templateId=' + id })
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    }
  }
}
</script>
<style scoped>
.welcome-wrap {
}
footer {
  margin: 20px 0;
  text-align: center;
}

.search-form {
  margin: 20px 0;
}

.search-form ul {
  overflow: hidden;
  margin: 0;
}

.search-form ul li {
  float: left;
  margin: 0 10px;
}

.search-form ul li .el-input {
  display: none;
}

.img-con {
  /* width: 80%; */
  margin: 0 auto;
}

.img-con ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.img-con ul li {
  flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  -o-flex: 0 1 auto;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex-basis: 20%;
  box-sizing: border-box;
  /* padding: 20px; */
  border: 1px solid #ccc;
  margin: 0 2.5% 5%;
}

.img-con ul {
  padding: 0;
}
.img-con ul li[data-v-184e0f44]:nth-child(4n-3) {
  margin: 0 2.5% 5% 0;
}

.img-con ul li:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.img-con figcaption {
  margin-top: 15px;
  margin-left: 10px;
  line-height: 2;
}

.img-con a,
.img-con img {
  display: block;
  width: 100%;
}
</style>
